<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <title>段落信息管理</title>
    <div th:replace="common/common::head"></div>
</head>

<body>
<nav th:replace="common/common::topbar"></nav>

<div class="container-fluid">
    <nav th:replace="common/common::sidebar"></nav>
    <div class="col-lg-9 col-md-12 col-sm-12" style="height:100%" id="content">
        <ol class="breadcrumb">
            <li><i class="icon-home"></i><a href="/index">  主页</a></li>
            <li class="active">段落信息表</li>
        </ol>
        <hr/>
        <div class="container-fluid">
            <div class="panel">
                <div class="panel-heading">
                    <i class="icon-th"> 段落信息列表</i>
                </div>
                <hr/>
                <div>
                    <form class="form-inline">
                        <button type="button" shiro:hasPermission="/segmentInfo/add" onclick="$('#segmentInfoModal').modal();" class="btn btn-primary" style="float: right; margin-right: 1px;">新增</button>
                        <button type="button" shiro:hasPermission="/segmentInfo/delete" onclick="delById();" class="btn btn-primary" style="float: right; margin-right: 1px;">删除</button>
                    </form>
                    <table class="table table-bordered data-table" id="datatable" >
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" class="checkall" />
                            </th>
                            <th>ID</th>
                            <th>父标题ID</th>
                            <th>段落名称</th>
                            <th>段落描述</th>
                            <th>资源类型</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

    <!--添加弹框-->
    <div class="modal fade" id="segmentInfoModal" tabindex="-1" role="dialog" aria-labelledby="addRecordLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="addRecordLabel">添加段落信息</h4>
                </div>
                <div class="modal-body">
                    <form id="segmentInfoForm">
                        <div class="form-group">
                            <label  class="control-label">段落信息名称:</label>
                            <input type="text" class="form-control" name="segment_name" id="segment_name" placeholder="段落信息名称"/>
                        </div>
                        <div class="form-group">
                            <label  class="control-label">父标题ID:</label>
                            <input type="text" class="form-control" id="parentId" name="parentid"  placeholder="请输入父标题ID">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">段落描述:</label>
                            <input type="text" class="form-control" id="segment_content" name="segment_content"  placeholder="请输入段落描述">
                        </div>
                        <div class="form-group">
                            <label  class="control-label">资源类型:</label>
                            <select class="form-control" name="type" id="type" >
                                <option value="1">一级标题</option>
                                <option value="2">二级标题</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" onclick="addSegmentInfo();" class="btn btn-primary">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!--/添加弹框-->


<div th:replace="common/common::footer"></div>
<div th:replace="common/common::script"></div>
<script type="text/javascript">
        var table;
        $(".checkall").click(function () {
            var check = $(this).prop("checked");
            $(".checkchild").prop("checked", check);
        });
        $(document).ready(function() {
            table = $('#datatable').DataTable( {
                "dom": '<"top"i>rt<"bottom"flp><"clear">',
                "searching" : false,
                "JQueryUI": true,
                "sPaginationType": "full_numbers",
                "serverSide": true,//开启服务器模式，使用服务器端处理配置datatable
                "processing": true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

                "ajax": '/segmentInfo',
                "columns": [
                    {
                        "sClass": "text-center",
                        "data": "id",
                        "render": function (data, type, full, meta) {
                            return '<input type="checkbox"  class="checkchild"  value="' + data + '" />';
                        },
                        "bSortable": false
                    },
                    { "data": "id" },
                    { "data": "segment_name" },
                    { "data": "parentid" },
                    { "data": "segment_content" },
                    { "data": "type" },
                ],
                columnDefs:[
                    { "orderable": false, "targets": 1 },
                    { "orderable": false, "targets": 2 },
                    { "orderable": false, "targets": 3 },
                    { "orderable": false, "targets": 4 },
                    {
                        "orderable": false,
                        "render": function(data, type, row) {
                            if(data==1){
                                return "菜单";
                            }else if(data==2){
                                return "按钮";
                            }else{
                                return "其他";
                            }
                        },
                        "targets": 5
                    },
                ],

            } );



        } );

        function search(){
            table.ajax.reload();
        }

        //添加段落标题信息
        function addSegmentInfo() {
            var name = $("#segment_name").val();
            var parentId = $("#parentId").val();
            var segment_content = $("#segment_content").val();

            if(name == "" || name == undefined || name == null){
                return layer.msg('资源名称不能为空', function(){
                    //关闭后的操作
                });
            }
            if(parentId == "" || parentId == undefined || parentId == null){
                return layer.msg('父资源id不能为空', function(){
                    //关闭后的操作
                });
            }
            if(segment_content == "" || segment_content == undefined || segment_content == null){
                return layer.msg('资源链接不能为空', function(){
                    //关闭后的操作
                });
            }
            $.ajax({
                cache: true,
                type: "POST",
                url:'/segmentInfo/add',
                data:$('#resourcesForm').serialize(),// 你的formid
                async: false,
                success: function(data) {
                    if(data=="success"){
                        layer.msg('保存成功');
                        table.ajax.reload();
                        $('#resourcesModal').modal('hide');
                    }else{
                        layer.msg('保存失败');
                        $('#resourcesModal').modal('hide');
                    }
                }
            });
        }

        function delById() {
            var id = $(".checkchild:checked").val();
            if ($(".checkchild:checked").length < 1)
            {
                layer.msg('请选择一条数据');
                return;
            }
            if ($(".checkchild:checked").length > 1)
            {
                layer.msg('一次只能修改一条数据');
                return;
            }
            layer.confirm('您确定要删除该记录吗？', {
                btn: ['确认','取消'] //按钮
            }, function(){
                $.ajax({
                    cache: true,
                    type: "POST",
                    url:'/segmentInfo/delete',
                    data:{id:id},
                    async: false,
                    success: function(data) {
                        if(data=="success"){
                            layer.msg('删除成功');
                            table.ajax.reload();
                        }else{
                            layer.msg('删除失败');
                        }
                    }
                });
            });

        }
    </script>
</body>

</html>